<template>
  <div>
    <el-dialog  title="题目预览" :visible="showDialog" width="50%" :before-close="btnCancel">
      <!--    单选-->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【题型】: {{ questionType | formQuestionType }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【编号】: {{ previewData.id }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【难度】:
            {{ previewData.difficulty | formDifficulty }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【标签】:{{ previewData.tags }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【学科】:
            {{ previewData.subject||previewData.subjectName }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【目录】: {{ previewData.catalog|| previewData.directoryName}}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【方向】: {{ previewData.direction }}
          </div>
        </el-col>
      </el-row>
      <hr />
      <!--  题型匹配 ----------------------------------------------S -->
      <div>
        【题干】:
        <div class="topic" v-html="previewData.question" />
        <div v-if="questionType === '1'">
          单选题 选项: (以下选中的选项为正确答案)
          <br />

          <el-radio-group :value="singleChoice">
            <div v-for="item in previewData.options" :key="item.id">
              <el-radio :label="item.isRight">{{item.title}}</el-radio>
            </div>
          </el-radio-group>
        </div>
        <div v-else-if="questionType === '2'">
          多选题
          <br />
          <el-checkbox-group :value="checkboxData">
            <div v-for="item in previewData.options" :key="item.id">
              <el-checkbox :label="item.isRight" name="type" :checked='item.isRight?true:false'>{{item.title}}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
        <div v-else>简答题</div>
      </div>
      <!--  题型匹配 ----------------------------------------------E -->
      <hr />
      <div>
        【参考答案】:
        <el-button type="danger" @click="showVideo = !showVideo"
          >视频答案预览</el-button
        >
        <video
          v-if="showVideo"
          class="active"
          :src="previewData.videoURL"
          width="320"
          height="240"
          controls="controls"
          autoplay
        ></video>
      </div>
      <hr />
      <div>
        【答案解析】:
        <div v-html="previewData.answer"></div>
      </div>
      <hr />
      <div>【题目备注】: {{ previewData.remarks }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="btnCancel">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js' // 导入试题类型\难度\方向列表
export default {
  name: 'QuestionsPreview',
  // 子组件
  components: {},
  // 组件传值
  props: ['previewData', 'showDialog', 'questionType'],
  data () {
    return {
      // 视频播放显示
      showVideo: false,
      // 单选
      singleChoice: 1,
      // 多选框
      checkboxData: [1]
    }
  },
  // 依赖发生改变时 调用
  computed: {},
  // 监控一个值的变换时 调用
  watch: {},
  // 在实例创建完成后被立即 调用
  created () {
  },
  // 在模板渲染成html后调用
  mounted () {
  },
  // ------销毁前---------
  beforeDestroy () {
    // questionType = null
    // difficulty = null
  },
  methods: {
    // 点击视频答案新建窗口打开视频
    // videoAnswer () {
    //   window.open(this.previewData.videoURL)
    // },
    // 关闭和取消
    btnCancel () {
      this.$emit('update:showDialog', false)
      this.showVideo = false
    }
  },
  filters: {
    // 难度
    formDifficulty: function (val) {
      return val && difficulty.find(e => e.value === +val).label
    },
    // 题型
    formQuestionType: function (val) {
      return val && (questionType.find(e => e.value === +val).label)
    }
  }

}
</script>

<style scoped lang='scss'>
.topic {
  color: #2222ff;
}
.active {
  display: block;
}
.disActive {
  display: none;
}
</style>
